import React from "react";
import { Layout, Icon, Tooltip, Button } from "antd";

import useLogout from "../hooks/useLogout";

const Header = ({ collapsed, onCollapse }) => {
  const { handleLogout } = useLogout();

  return (
    <Layout.Header
      style={{
        position: "fixed",
        zIndex: 1,
        width: "100%",
        padding: 0,
        background: "#fff",
        boxShadow: "0 6px 12px #ccc"
      }}
    >
      <Icon
        className="trigger"
        type={collapsed ? "menu-unfold" : "menu-fold"}
        onClick={onCollapse}
      />
      <Tooltip title={`退出`}>
        <Button
          style={{
            float: "right",
            marginRight: collapsed ? "104px" : "224px",
            lineHeight: "64px"
          }}
          onClick={handleLogout}
          type="link"
          icon="logout"
          size="large"
        />
      </Tooltip>
    </Layout.Header>
  );
};

export default Header;
